<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      padding: 80px;
    }
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 80px;
      position: relative;
    }
    .item {
      width: 240px;
      height: 240px;
    }
    .item img {
      object-fit: cover;
      cursor: pointer;
      display: block;
    }
    .pointer {
      position: absolute;
      /* 线框的四角线长度 */
      --l: 30px;
      /* 线框的粗细 */
      --t: 3px;
      /* 线框的间距 */
      --g: 15px;
      /* 图片的尺寸 需要js控制*/
      --s: 240px;
      /* 图片左上角的横坐标 需要js控制*/
      --x: 0px;
      /* 图片左上角的纵坐标 需要js控制*/
      --y: 0px;
      /* 线框的宽度 */
      width: calc(var(--s) + var(--g) * 2);
      /* 线框的高度 */
      height: calc(var(--s) + var(--g) * 2);
      /* 线框的边框 */
      border: var(--t) solid #000;
      left: calc(var(--x) - var(--g));
      top: calc(var(--y) - var(--g));
      transform: 0.3s;
      /* 锥形渐变 */
      mask: conic-gradient(at 50px 50px, #0000 75%, blue 75%) left top/calc(100% - 50px) calc(100% - 50px);
    }
  </style>
  <body>
    <div class="container">
      <div class="pointer"></div>
      <div class="item">
        <img src="https://picsum.photos/id/311/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/312/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/313/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/314/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/315/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/316/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/317/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/318/240/240" alt="" />
      </div>
      <div class="item">
        <img src="https://picsum.photos/id/319/240/240" alt="" />
      </div>
    </div>
  </body>
  <script src="./test.js"></script>
</html>
